  <!-- 大型广告位 -->
<template>
    <div>
      <el-form :model="data" ref="form" label-width="150px" size="small" label-position="left" >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="广告位编码" prop="chargeItemCode">
              <el-input  v-model="data.chargeItemCode" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="广告位名称" prop="name">
              <el-input  v-model="data.name" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联合同" prop="contractName">
              <el-input  v-model="data.contractName" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前客户名称" prop="leaserShopName">
              <el-input  v-model="data.leaserShopName" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前合同截止日" prop="leaveDate">
              <el-date-picker disabled v-model="data.leaveDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划举措" prop="planType"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select disabled  v-model="data.planType" placeholder="请选择" clearable >
                <el-option v-for="item in planconstantMap.planType" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="离场时间" prop="leaveDate">
              <el-date-picker :disabled="!isEdit" v-model="data.leaveDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="清退成本(元)" prop="clearCost">
              <el-input :disabled="!isEdit" type="number" v-model="data.clearCost" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划起租日" prop="rentStartDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit" v-model="data.rentStartDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束日" prop="rentEndDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit" v-model="data.rentEndDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计月租金" prop="monthlyRentAmount">
              <el-input :disabled="!isEdit" type="number"  v-model="data.monthlyRentAmount" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 收款计划 -->
        <div class="reimbursement-asset">
          <div class="reimbursement-asset-name">收款计划</div>
          <div v-if="isEdit" class="reimbursement-asset-name-btn"  @click="addPlan()">添加</div>
        </div>
        <div v-for="(item,index) in collectionItemListCloudDto" :key="index">
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="收款时间" prop="paymentDate">
                <el-date-picker :disabled="!isEdit" v-model="item.paymentDate" type="date" placeholder="请选择日期"> </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="收款金额" prop="paymentAmount" >
                <el-input :disabled="!isEdit" type="number" v-model="item.paymentAmount" :placeholder="item.placeholder"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div style="display: flex;justify-content: center;flex-direction: column;height:30px;line-height:30px;">
                <el-button type="text" @click="remove(index)"> 删除 </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 收款计划 end -->
        <div v-if="showFile">
          <el-col :span="24" style="min-height:50px;">
            <el-form-item label="附件" style="margin-bottom:0!important;">
              <el-upload class="upload-demo"  :file-list="fileList" action="no" :on-remove="handleRemove" :http-request="event => beforeupload(event.file)">
                <el-button type="primary" plain class="addSpan" style="margin-right: 10px" size="mini">上传附件</el-button>
              </el-upload>
              <el-button type="text" v-for="(file, i) in businessAttachmentMapListCloudDto" :key="i" @click="DownFile(file)">{{ file.fileTitle }} </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height:50px;">
            <el-form-item  label="提示："> {{ errorMessage.resultMessage }} </el-form-item>
          </el-col>
          <el-col :span="24" style="height:50px;">
            <el-form-item label="说明：">
              <el-input size="mini" type="textarea" autosize v-model="data.configDesc"></el-input>
            </el-form-item>
          </el-col>
        </div>
        <!-- 优惠 -->
        <div v-if="data.planType==4">
          <div class="reimbursement-asset">
            <div class="reimbursement-asset-name">增加优惠</div>
            <div v-if="isEdit" class="reimbursement-asset-name-btn"  @click="AdddiscountsItemListCloudDto()">添加</div>
          </div>
          <div v-for="(item, index) in discountsItemListCloudDto" :key="index">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="选择收款时间" label-width="150px">
                  <el-select :disabled="!isEdit" v-model="item.paymentDate" placeholder="请选择">
                    <el-option v-for="(item, i) in paymentDateoptions" :key="i" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="优惠金额" label-width="150px">
                  <el-input :disabled="!isEdit" type="number" v-model="item.paymentAmount" :step="10" placeholder="请输入金额"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div style="text-align: right; height: 62px;padding-right:10px">
                  <el-button size="small" type="text"  @click="DeldiscountsItemListCloudDto(index)">删除优惠</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 优惠 end -->
        <el-col v-if="isEdit">
          <el-form-item>
            <div class="t-right padding-top-15" >
              <el-button  type="primary" size="small" @click="save('form')" plain>确定</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
</template>

<script>
import { uploadPhoto } from '@/api';
export default {
  props: {
    largeAdData: {
      type: Object,
      default:{},
    },
    errorMessage:{
      type: Object,
      default:{},
    },
    isEdit:{
      type: Boolean,
      default:false,
    },
  },
  watch:{
    errorMessage:{
      immediate:true,
      deep:true,
      handler(val){
        if(!val.success){
          this.showFile= true
        }else{
          this.showFile= false
        }
      }
    },
  },
  data() {
    return {
      showFile:false,
      fileList:[],
      planconstantMap:{},
      paymentDateoptions:[],
      discountsItemListCloudDto:[],
      collectionItemListCloudDto:[],
      data:{},
    };
  },

  methods: {
    init(){
      this.data =Object.assign({}, this.largeAdData.planAssetContractDto, this.largeAdData.billConfigCloudDto) 
      this.discountsItemListCloudDto = this.largeAdData.discountsItemListCloudDto || []
      this.businessAttachmentMapListCloudDto = this.largeAdData.businessAttachmentMapListCloudDto ||[]
      this.fileList = this.largeAdData.businessAttachmentMapListCloudDto || []
      this.collectionItemListCloudDto = this.largeAdData.collectionItemListCloudDto || []
      if(this.businessAttachmentMapListCloudDto&&this.businessAttachmentMapListCloudDto.length>0){
        this.showFile = true
      }
      let t = setInterval(() => {
        if(this.$store.state.planconstantMap){
          this.planconstantMap = this.$store.state.planconstantMap
          clearInterval(t)
        }
      }, 1000);
    },
    //日期验证
    validata(obj) {
      if (obj.leaveDate && obj.rentStartDate) {
        if (obj.leaveDate <= obj.rentStartDate) {
          this.$message.warning('离场时间必须大于计划起租日');
          return true;
        }
      }
      if (obj.rentStartDate && obj.rentEndDate) {
        if (obj.rentStartDate >= obj.rentEndDate) {
          this.$message.warning('开始时间/起租日，必须小于结束时间');
          return true;
        }
      }
      return false;
    },
    //保存
    save(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.validata(this.data)) return;
          this.$emit('FormVerify',{
            billConfigCloudDto:this.data,
            collectionItemListCloudDto:this.collectionItemListCloudDto,
            discountsItemListCloudDto:this.discountsItemListCloudDto,
            businessAttachmentMapListCloudDto:this.businessAttachmentMapListCloudDto
          })
        } 
      });
    },
    addPlan(){
      this.collectionItemListCloudDto.push({
        paymentDate:'',
        paymentAmount:''
      })
    },
    remove(index){
      if(!this.isEdit){
        return
      }
      this.collectionItemListCloudDto.splice(index, 1);
    },
    AdddiscountsItemListCloudDto(){
      this.discountsItemListCloudDto.push({
        paymentDate:'',
        paymentAmount:''
      })
    },
     //删除优惠
    DeldiscountsItemListCloudDto(index){
      if(!this.isEdit){
        return
      }
      this.discountsItemListCloudDto.splice(index, 1);
    },
     beforeupload(file, a) {
      uploadPhoto(file).then(res => {
        this.fileList.push(file)
        this.businessAttachmentMapListCloudDto = [{ fileUrl: res.data.rows[0].url, fileTitle: res.data.rows[0].originalName, fileId: res.data.rows[0].key,uid:file.uid }];
        this.$message.success('上传成功');
      });
    },
    handleRemove(file){
      this.businessAttachmentMapListCloudDto.forEach(((ele,index)=>{
        if(ele.uid == file.uid){
          this.businessAttachmentMapListCloudDto.splice(index, 1)
        }
      }))
    },
    DownFile(file) {
      window.open(file.fileUrl);
    },
    closeDialog(){
      this.fileList = []
      this.paymentDateoptions=[]
      this.discountsItemListCloudDto=[]
      this.businessAttachmentMapListCloudDto=[]
      this.collectionItemListCloudDto = []
    }
  },
};
</script>

<style lang="scss" scoped>
  .reimbursement-asset{
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
    margin-bottom: 20px;
    .reimbursement-asset-name{
      font-size: 16px;
      font-weight: 600;
      line-height: 30px;
      height: 30px;
    }
    .reimbursement-asset-name-btn{
      line-height: 30px;
      height: 30px;
      margin-left: 20px;
      color: #409EFF;
      cursor: pointer;
    }
  }
  .el-row .el-col {
    height: 50px;
  }

</style>
